<template>
<div>
    <!-- <van-sticky :offset-top="0">
            <homeHeader :nav_list="nav_list" ></homeHeader>
    </van-sticky> -->
    <div class="mainContent">
        <HomeListNav
            :listnavdata="listnavdata"
            :type="type"
        ></HomeListNav>

        <div class="mainList">
            <van-tabs v-model="active" @click="onClick" animated>
                <van-tab v-for="(titl,key) in tit" :key="key" :title="titl">
                    <van-skeleton title :row="5" :loading="loading">
                        <div class="listItem">
                            <HomeList
                            v-for="(intheater,key) in intheaters"
                            :key="key"
                            :intheater="intheater"
                            ></HomeList>
                        </div>
                    </van-skeleton>
                </van-tab>
            </van-tabs>
            
        </div>

    </div>
</div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import HomeList from '../components/homelist'
import homeHeader from '../components/homeHeader'
import HomeListNav from '../components/homelistnav'

export default {
    props:['d_type','typeChange'],
    data(){
        return{
            tit:['热门','销量','上新','价格'],
            intheaters:[],
            nav_list:[],
            listnavdata:[],
            type:'',
            active:0,
            loading:true
        }
    },
    methods:{
        sortType(value){
            axios.post('/biyao',
            {
                topicld : 10300148,
                pageId : 'moses:pid_1',
                sortType : value,
                sortvValue : 0,
                pageSize : 20,
                pageIndex : 1 ,
                categoryId : this.type
            }).then((result) => {
                
                this.intheaters = result.data.data.blockList[0].block
                // this.listnavdata = result.data.data.subCategory.threeLevelcategoryList
                this.loading = false
            }).catch((err) => {
                return err.message
                this.loading = false
            })
        },
        onClick(name, title) {
            this.loading = true
            if(title ==='热门'){
                this.sortType(0)
            }
            if(title ==='销量'){
                this.sortType(1)
            }
            if(title ==='上新'){
                this.sortType(5)
            }
            if(title ==='价格'){
                this.sortType(2)
            }
         
        },
    },
    mounted() {
        this.type = this.typeChange
        axios.post('/biyao',
            {
                topicld : 10300148,
                pageId : 'moses:pid_1',
                sortType : 0,
                sortvValue : 0,
                pageSize : 20,
                pageIndex : 1 ,
                categoryId : this.type
            }).then((result) => {
                
                this.intheaters = result.data.data.blockList[0].block
                this.listnavdata = result.data.data.subCategory
                console.log(this.listnavdata)
                this.loading = false

            }).catch((err) => {
                return err.message
                this.loading = false

        })
    },
    components:{
        HomeList,
        homeHeader,
        HomeListNav
    },
    watch: {
        $route(to ,from){
            this.type = to.params.id
            axios.post('/biyao',
            {
                topicld : 10300148,
                pageId : 'moses:pid_1',
                sortType : 0,
                sortvValue : 0,
                pageSize : 20,
                pageIndex : 1 ,
                categoryId : this.type
            }).then((result) => {
                this.intheaters = result.data.data.blockList[0].block
                this.listnavdata = result.data.data.subCategory.threeLevelcategoryList
            }).catch((err) => {
                return err.message
        })
        }
    },
}
</script>

<style lang="stylus" scoped>
.mainContent
    width 100%
    overflow scroll
    .mainList
        width 100%
        border-top .15rem solid #ddd
        .listTab
            width 100%
            height .8rem
            list-style none 
            display flex
            justify-content space-around
            line-height .8rem
            font-size .28rem
        .listItem
            width 100%
            


</style>
<style lang="css">
.van-tabs__line{
    background-color: #7f4395;
}
</style>